Preventing Floating Elements from Stacking Up
Description
By default, floating elements will stack up next to one another.
The clear property clears the stacking up.
It specifies that one or both edges of a floating element must not adjoin the edge of another floating element.
Its possible values are:
- left - The left edge of the element may not adjoin another floating element.
- right - The right edge of the element may not adjoin another floating element.
- both - Neither edge may adjoin another floating element.
- none - The element is not cleared and either edge may adjoin another floating element.
Example
The following code shows the clear property in use.
<!DOCTYPE HTML>
<html>
<head>
<style>
p.toggle {<!--from ww w. ja v a 2 s . c o m-->
float: left;
border: medium double black;
width: 40%;
margin: 2px;
padding: 2px;
}
p.cleared {
clear: left;
}
</style>
</head>
<body>
<p class="toggle">This is a test.</p>
<p class="toggle cleared">This is a test.</p>
<p>This is a test.</p>
<p>
<button>Left</button>
<button>Right</button>
<button>None</button>
</p>
<script>
var buttons = document.getElementsByTagName("BUTTON");
for (var i = 0; i < buttons.length; i++) {
buttons[i].onclick = function(e) {
var elements = document.getElementsByClassName("toggle");
for (var j = 0; j < elements.length; j++) {
elements[j].style.cssFloat = e.target.innerHTML;
}
};
}
</script>
</body>
</html>